<template>
<div class="mainContent">
  <pathTracking :path="Model.path" />
  <div class="container">
    <!-- 一级tabs -->
    <el-tabs v-model="Model.activeTab" @tab-click="onTabChange">
      <el-tab-pane label="售后入库单" name="1"></el-tab-pane>
      <el-tab-pane label="操作记录" name="2"></el-tab-pane>
    </el-tabs>
    <div class="tabBox">
      <el-row class="detailTable">
        <el-form :inline="true">
          <el-col :sm="24" :md="12" :lg="8" :xl="6" v-for="(item,index) in Model.tabFormInline" :key="index">
            <el-form-item :label="item.label+'：'">{{item.value}}</el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="tabBoxStep">
        <el-steps :active="Model.stepOption.activeStep">
          <el-step :title="item.title" :description="item.description" v-for="(item,index) in Model.stepOption.step" :key="index"></el-step>
        </el-steps>
      </div>
      <el-row class="detailTable">
        <div class="detailTableItemTitle">
          <span class="detailTableImgSmall"></span>
          <p class="text">售后入库单基础信息</p>
        </div>
        <advancedSearch :option="Model.filterOption" @getChild="getFilterData"></advancedSearch>
      </el-row>
      <div v-show="Model.activeTab==1">
        <el-row class="detailTable">
          <div class="detailTableItemTitle">
            <span class="detailTableImgSmall"></span>
            <p class="text">商品明细-应入</p>
          </div>
          <div class="detailTableDetail" v-show="Model.tab1TableDetail1.flag">
            <el-table :data="Model.detailData.shouldSaleGoodsInfoVos" border style="width: 100%;">
              <el-table-column type="index" width="50" label="序号" fixed></el-table-column>
              <el-table-column prop="imageUrl" label="商品图片" width="200">
                <template slot-scope="scope">
                  <el-tooltip placement="top" effect="light">
                    <div slot="content">
                      <img class="maxTableImg" :src="scope.row.imageUrl" alt>

                      </div>
                      <img class="mainTableImg" :src="scope.row.imageUrl" alt>

                    </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="customCode" label="定制编码" width="120"></el-table-column>
              <el-table-column prop="batchNo" label="条码" width="150"></el-table-column>
              <el-table-column prop="productCategoryCategory" label="品类" width="120"></el-table-column>
              <el-table-column prop="description" width="150">
                <template slot="header" slot-scope="scope">
                  <el-tooltip content="钻石信息顺序:颜色-净度-切工-抛光-对称-荧光" placement="top">
                    <span class="iconQuestionmark">描述</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="hand" label="手寸" width="200"></el-table-column>
              <el-table-column prop="canUseAmount" label="数量" width="200"></el-table-column>
              <el-table-column prop="theMainStoneWeighsOneCarat" label="克拉重" width="120"></el-table-column>
              <el-table-column prop="giaWaistSize" label="GIA腰码" width="120"></el-table-column>
              <el-table-column prop="inspectionCertificateTypeOnenationalInspection" label="国检证书" width="120"></el-table-column>
              <el-table-column prop="theLettering" label="刻字" width="120"></el-table-column>
            </el-table>
          </div>
        </el-row>
        <el-row class="detailTable" v-if="Model.status!==10">
          <div class="detailTableItemTitle">
            <span class="detailTableImgSmall"></span>
            <p class="text">商品明细-实入</p>
          </div>
          <div class="detailTableDetail">
            <div class="exportBox" v-show="!Model.detailFlag">
              <div class="exportBoxAuto">
                <span>是否手动导入</span>
                <el-radio-group v-model="Model.exportBarcodeFlag">
                  <el-radio :label="false">否</el-radio>
                  <el-radio :label="true">是</el-radio>
                </el-radio-group>
                <div class="exportBoxHand" v-show="!Model.exportBarcodeFlag">
                  <el-input v-model="Model.exportBarcode" placeholder="请输入条码/包码/物料编码" size="small" style="margin: 0 20px;width: 200px;"></el-input>
                  <button class="normalButton bgBtnBrown" @click="requestSaleGoodsInfoByEntity">确认</button>
                </div>
                <button
                    class="normalButton bgBtnBrown"
                    v-show="Model.exportBarcodeFlag"
                    style="margin-left: 10px;"
                    @click="onExportMaterial"
                  >
                    +
                    导入物料
                  </button>
              </div>
              <div class="exportBoxAuto">
                <button class="normalButton bgBtnWhite" @click="onDeleteExportData">删除</button>
              </div>
            </div>
            <el-table :data="Model.detailData.actualSaleGoodsInfoVos" border style="width: 100%;" @selection-change="onTableSelectionChange">
              <el-table-column type="index" width="50" label="序号" fixed></el-table-column>
              <el-table-column prop="imageUrl" label="商品图片" width="200">
                <template slot-scope="scope">
                  <el-tooltip placement="top" effect="light">
                    <div slot="content">
                      <img class="maxTableImg" :src="scope.row.imageUrl" alt>
                    </div>
                      <img class="mainTableImg" :src="scope.row.imageUrl" alt>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="customCode" label="定制编码" width="120"></el-table-column>
              <el-table-column prop="batchNo" label="条码" width="150"></el-table-column>
              <el-table-column prop="productCategoryCategory" label="品类" width="120"></el-table-column>
              <el-table-column prop="description" width="150">
                <template slot="header" slot-scope="scope">
                  <el-tooltip content="钻石信息顺序:颜色-净度-切工-抛光-对称-荧光" placement="top">
                    <span class="iconQuestionmark">描述</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="hand" label="手寸" width="200"></el-table-column>
              <el-table-column prop="canUseAmount" label="数量" width="200"></el-table-column>
              <el-table-column prop="theMainStoneWeighsOneCarat" label="克拉重" width="120"></el-table-column>
              <el-table-column prop="giaWaistSize" label="GIA腰码" width="120"></el-table-column>
              <el-table-column prop="inspectionCertificateTypeOnenationalInspection" label="国检证书" width="120"></el-table-column>
              <el-table-column prop="theLettering" label="刻字" width="120"></el-table-column>
            </el-table>
          </div>
          <div class="detailTableDetail" style="display:flex;">
            <span style="font-size: 14px;color: #222;padding-top: 8px;">备注 ： </span>
            <el-input v-model="Model.remark" :disabled="Model.detailFlag" type="textarea" style="width:250px;" :row="2" placeholder="不超过50字" ></el-input>
          </div>
        </el-row>
        <el-row class="detailTable" v-if="Model.status!==10">
          <div class="detailTableItemTitle">
            <span class="detailTableImgSmall"></span>
            <p class="text">包材</p>
          </div>
          <div class="detailTableDetail">
            <div class="exportBox" v-show="!Model.detailFlag">
              <div class="exportBoxAuto">
                <button class="normalButton bgBtnWhite" @click="onAddPackingMaterials">添加</button>
              </div>
            </div>
            <el-table :data="Model.detailData.packingGoodsInfoVos" border style="width: 100%;">
              <el-table-column type="index" width="50" label="序号" fixed></el-table-column>
              <el-table-column prop="commodityType" label="品类" width="120"></el-table-column>
              <el-table-column prop="commodityCode" label="商品编码" width="120"></el-table-column>
              <el-table-column prop="nameOfCommodity" label="商品名称" width="120"></el-table-column>
              <el-table-column prop="aaaaaaa" label="商品规格" width="120"></el-table-column>
              <el-table-column prop="mainQuantity" label="数量" width="120"></el-table-column>
              <el-table-column prop="basicUnitOfMeasurement" label="单位"></el-table-column>
            </el-table>
            <div class="exportBox" v-show="!Model.detailFlag">
              <div style="text-align: center;padding-top: 20px;">
                <button
                    class="normalButton bgBtnBrown"
                    style="margin-right: 15px;"
                    @click="onSureWarehouse"
                  >确认入库</button>
                <button class="normalButton bgBtnBlack">取消</button> 
              </div>
            </div>
          </div>
        </el-row>
      </div>
      <div v-show="Model.activeTab==2">
        <el-row class="detailTable">
          <div class="detailTableItemTitle">
            <span class="detailTableImgSmall"></span>
            <p class="text">订单操作日志</p>
            <img
                class="detailTableImgNormal"
                :src="Model.tab2TableDetail1.src"
                alt
                @click="toggleTableDetail('tab2TableDetail1')"
              >
            </div>
            <div class="detailTableDetail" v-show="Model.tab2TableDetail1.flag">
              <el-table :data="Model.detailData.whWarehouseLogList" border show-summary style="width: 100%;" @selection-change="onTableSelectionChange">
                <el-table-column prop="createTime" label="时间" width="200"></el-table-column>
                <el-table-column prop="type" label="操作类型" width="120"></el-table-column>
                <el-table-column prop="createBy" label="操作人" width="120"></el-table-column>
                <el-table-column prop="record" label="操作记录"></el-table-column>
              </el-table>
            </div>
        </el-row>
      </div>
      <!-- 导入物料弹框 -->
      <el-dialog :visible.sync="Model.dialogFormVisible" top="100px" class="viewDialog viewDialogSmall">
        <div class="common-table-title">
          <div class="common-table-icon"></div>
          <div class="common-table-fl">导入物料</div>
        </div>
        <div class="exportInputBox">
          <el-input placeholder="请输入内容" v-model="Model.uploadFile.name" disabled class="input-with-select" size="small">
            <el-button slot="append" size="small" type="primary">浏览</el-button>
          </el-input>
          <div class="exportInputHandle">
            <input type="file" @change="onUploadFileChange">
            </div>
            <div class="viewDialogFooter">
              <div class="viewDialogFooterSure" @click="onUploadSureFile">上传模板</div>
            </div>
            <div class="viewDialogFooter">
              <a :href="Model.fileUrl">{{Model.fileName}}</a>
            </div>
          </div>
      </el-dialog>
      <!-- 弹框 -->
      <el-dialog :visible.sync="Model.addDialogFormVisible" top="100px" class="viewDialog viewDialogBig">
        <div class="common-table-title">
          <div class="common-table-icon"></div>
          <div class="common-table-fl">包材明细</div>
        </div>
        <div class="exportInputBox">
          <el-table :data="Model.packingMaterialsList" border show-summary style="width: 100%;">
            <el-table-column prop="commodityType" label="品类" width="120"></el-table-column>
            <el-table-column prop="commodityCode" label="商品编码" width="150"></el-table-column>
            <el-table-column prop="nameOfCommodity" label="商品名称" width="120"></el-table-column>
            <el-table-column prop="guige" label="商品规格" width="120"></el-table-column>
            <el-table-column prop="mainQuantity" label="数量" width="160">
              <template slot-scope="scope">
                <el-input-number size="small" v-model="scope.row.mainQuantity" :min="0" :max="10">
                </el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="basicUnitOfMeasurement" label="单位">
              <template slot-scope="scope">
                件
              </template>
            </el-table-column>
            </el-table-column>
          </el-table>
          <div style="text-align: center;padding-top: 20px;">
            <button
              class="normalButton bgBtnBrown"
              style="margin-right: 15px;"
              @click="onSureAddToPackingGoodsInfoVos"
              >确认
            </button>
            <button class="normalButton bgBtnBlack">取消</button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</div>
</template>

<script>
import pathTracking from "@/components/common/pathTracking";
import pagination from "@/components/common/pagination.vue";
import advancedSearch from "@/components/common/filter/advancedSearch";
import {
  getDateString
} from "@/assets/js/common.js";
import Model from "./model.js";
import Controller from "./controller.js";
export default {
  name: "purchase",
  mixins: [Model, Controller],
  components: {
    advancedSearch,
    pagination,
    pathTracking
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="less" scoped>
@import "./index.less";
</style>
